@charset "utf-8";

@keyframes wave {
  0% { height: 1.4rem; }
  50% { height: 0; }
  100% { height: 1.4rem; }
}

.loading {
  display: none;
  position: fixed;
  text-align: center;
  overflow: hidden;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  padding: 0.5rem;
  background-color: #fff;
  line-height: 2rem;
  border-radius: 50%;
  box-shadow: 0 0 0.5rem rgba(#000, 0.5);
  span {
      display: inline-block;
      vertical-align: bottom;
      width: 0.5rem;
      // height: 15px;
      background: linear-gradient(#FEA3A9, #F22625);
      animation: wave 1.2s linear infinite;
      @for $i from 0 through 5 {
          &:nth-child(#{$i}) {
              height: round(random() * 1.5rem);
              animation-delay: 0.2s * $i;
          }
      }
      & + span {
          margin-left: -0.2rem;
      }
  }

  p {
      margin: 0;
      color: #999;
      font-size: 1.2rem;
  }
}
